<script setup lang="ts">
import {
  Warning,
  Service,
  Microphone,
  DocumentChecked,
  VideoPlay,
  Loading,
  CircleCheck,
  WarnTriangleFilled
} from "@element-plus/icons-vue";
import {storeToRefs} from "pinia";
import appStore from "@/store";
import {ElMessage, FormInstance, FormRules} from "element-plus";
import {getAudio, getModels} from "@/http/m_api/ttsService";
import universalSpeakerList from "@/assets/ts/universalSpeakerList";
import {gsvi_audio_path_pre} from "@/assets/ts/constant";

const {interviewNewStore} = storeToRefs(appStore.useInterviewJsonStore);
const ruleFormRef = ref<FormInstance>();

// Animation state
const fadeIn = ref(false);

onMounted(async () => {
  setTimeout(() => {
    fadeIn.value = true;
  }, 100);

  loadingData.value = true;
  fetchUniversalSpeakers();
  await fetchModels();

  if (interviewNewStore.value.Settings.model_choice === 'universal') {
    modelSelectValue.value = '通用';
    if (interviewNewStore.value.Settings.universal_speaker_name !== '') {
      universalSpeakerSelectValue.value =
          universalSpeakers.value.findIndex(
              (item: any) =>
                  item.ShortName === interviewNewStore.value.Settings.universal_speaker_name);
    }
  } else if (interviewNewStore.value.Settings.hoyo_model_name !== '') {
    const [modelName, speakerName] = interviewNewStore.value.Settings.hoyo_model_name.split('-');
    modelSelectValue.value = modelName;
    hoyoModelSelectedValue.value = speakerName;
  } else {
    interviewNewStore.value.Settings.model_choice = 'universal';
    modelSelectValue.value = '通用';
  }
  loadingData.value = false;
});

const rules = reactive<FormRules<any>>({
  hoyo_model_name: [
    {
      required: true,
      validator: (rule: any, value: any, callback: any) => {
        if (!hoyoModelSelectedValue.value || hoyoModelSelectedValue.value === '') {
          return callback(new Error('请选择角色'));
        }
        const filteredValue = getFilterResult(hoyoModelSelectedValue.value);
        if (filteredValue.length === 0) return callback(new Error('请输入正确的模型名称'));
        hoyoModelSelectedValue.value = filteredValue[0].value;
        interviewNewStore.value.Settings.hoyo_model_name = `${modelSelectValue.value}-${hoyoModelSelectedValue.value}`;
        callback();
      },
      trigger: ['blur']
    }
  ],
  universal_voice_name: [
    {
      required: true,
      validator: (rule: any, value: any, callback: any) => {
        if (interviewNewStore.value.Settings.model_choice === 'universal') {
          if (interviewNewStore.value.Settings.universal_speaker_name === '') {
            return callback(new Error('请选择音色'));
          }
        }
        callback();
      },
      trigger: ['blur']
    }
  ]
});

const loadingData = ref(false);

// Model configuration
const models = ref<string[]>(['通用']);
const modelSelectValue = ref('通用');

const modelTypes = [
  {
    value: '通用',
    label: '通用模型',
    description: '合成速度快，音色较常见',
    icon: Service,
    color: '#409eff'
  }
];

const setSelectModel = (value: string) => {
  if (value === '通用') interviewNewStore.value.Settings.model_choice = 'universal';
  else {
    interviewNewStore.value.Settings.model_choice = 'hoyo';
    hoyoModelSelectedValue.value = null;
  }
};

// Hoyo models
const hoyoModels = ref<string[]>([]);
const hoyoModelSpkDict = ref<Record<string, Speaker[]>>({});

interface Speaker {
  value: string;
}

const hoyoModelSelectedValue = ref();

const fetchModels = async () => {
  setButtonDisable("加载模型中");
  await getModels().then((data: any) => {
    if (data) {
      const model_spk = Object.keys(data.models);
      const modelsSet = new Set<string>();
      model_spk.forEach(item => {
        const [model, speaker] = item.split('-');
        modelsSet.add(model);
        if (!hoyoModelSpkDict.value[model]) {
          hoyoModelSpkDict.value[model] = [];
        }
        hoyoModelSpkDict.value[model].push({value: speaker});
      });
      hoyoModels.value = Array.from(modelsSet);
      models.value.push(...hoyoModels.value);

      // Add character models to modelTypes
      hoyoModels.value.forEach(model => {
        modelTypes.push({
          value: model,
          label: `${model} 角色模型`,
          description: '音色丰富，生成语音会保存',
          icon: Microphone,
          color: '#67c23a'
        });
      });
    }
  }).catch(() => {
    ElMessage({type: 'error', message: '加载模型失败，当前仅可使用通用模型'});
    interviewNewStore.value.Settings.model_choice = 'universal';
    modelSelectValue.value = '通用';
    setButtonEnable();
  });
  setButtonEnable();
};

const filterHoyoSpeaker = (queryString: string, cb: any) => {
  const results = getFilterResult(queryString);
  cb(results);
};

const getFilterResult = (queryString: string) => {
  return queryString
      ? hoyoModelSpkDict.value[modelSelectValue.value].filter(createFilter(queryString))
      : hoyoModelSpkDict.value[modelSelectValue.value];
};

const createFilter = (queryString: string) => {
  return (speaker: Speaker) => {
    return (
        speaker.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    );
  };
};

const setHoyoSpeakerValue = (item: Record<string, any>) => {
  interviewNewStore.value.Settings.hoyo_model_name = `${modelSelectValue.value}-${hoyoModelSelectedValue.value}`;
};

// Universal speakers
const universalSpeakers = ref();
const universalSpeakerSelectValue = ref();

const fetchUniversalSpeakers = () => {
  universalSpeakers.value = universalSpeakerList;
};

const setUniversalSpeakerValue = (value: any) => {
  interviewNewStore.value.Settings.universal_speaker_name = universalSpeakers.value[value].ShortName;
};

// Audio testing
const audioUrl = ref('');
const AudioButtonDisable = ref(false);
const AudioButtonMsg = ref('测试语音');

const setButtonEnable = () => {
  AudioButtonMsg.value = '测试语音';
  AudioButtonDisable.value = false;
};

const setButtonDisable = (msg: string) => {
  AudioButtonMsg.value = msg;
  AudioButtonDisable.value = true;
};

interface Audio {
  src: any;
  play: Function;
}

const audio = ref<Audio>();
const loadingAudio = ref(false);
const errorModel = ref(false);

const testAudio = async () => {
  if ((interviewNewStore.value.Settings.model_choice === 'universal' && interviewNewStore.value.Settings.universal_speaker_name === '')
      || (interviewNewStore.value.Settings.model_choice === 'hoyo' && (interviewNewStore.value.Settings.hoyo_model_name === '' || hoyoModelSelectedValue.value === ''))) {
    ElMessage({type: "error", message: '请完成您的选择！'});
    return;
  }
  loadingAudio.value = true;
  setButtonDisable("合成语音中");
  await getAudio("欢迎使用智聘通，接下来将进行模拟面试演练").then((data: any) => {
    let audioUrl;
    if (!data) {
      ElMessage({type: "error", message: '数据异常！'});
      errorModel.value = true;
      return;
    }
    if (data instanceof ArrayBuffer) {
      const audioBlob = new Blob([data], {type: 'audio/mpeg'});
      audioUrl = URL.createObjectURL(audioBlob);
    } else {
      audioUrl = data.audio_url.replace('http://127.0.0.1:9874', gsvi_audio_path_pre);
    }
    if (audio.value) {
      setButtonEnable();
      loadingAudio.value = false;
      audio.value.src = audioUrl;
      audio.value.play();
    } else {
      ElMessage({type: "error", message: '播放器初始化错误！'});
      errorModel.value = true;
    }
  }).catch((e: any) => {
    ElMessage({type: "error", message: "合成失败，请稍后再试"});
    errorModel.value = true;
  });
};

// Form completion status
const formCompletion = computed(() => {
  let completed = 0;
  let total = 3;

  if (interviewNewStore.value.Settings.reportName) completed++;
  if (modelSelectValue.value && modelSelectValue.value !== '') completed++;
  if (interviewNewStore.value.Settings.model_choice === 'universal' && interviewNewStore.value.Settings.universal_speaker_name) completed++;
  else if (interviewNewStore.value.Settings.model_choice === 'hoyo' && interviewNewStore.value.Settings.hoyo_model_name) completed++;

  return {
    percentage: Math.round((completed / total) * 100),
    completed,
    total
  };
});

// Get current model info
const currentModelInfo = computed(() => {
  return modelTypes.find(type => type.value === modelSelectValue.value);
});
</script>

<template>
  <audio ref="audio">
    <source :src="audioUrl">
  </audio>

  <div class="service-settings-container" :class="{ 'fade-in': fadeIn }">
    <!-- Header Section -->
    <div class="settings-header">
      <div class="header-content">
        <div class="header-left">
          <h2 class="section-title">
            <el-icon class="title-icon">
              <Service/>
            </el-icon>
            服务设置
          </h2>
          <p class="section-description">配置语音服务和报告生成选项</p>
        </div>
        <div class="header-right">
          <div class="completion-indicator">
            <div class="completion-circle" :style="{ '--progress': formCompletion.percentage + '%' }">
              <span class="completion-text">{{ formCompletion.percentage }}%</span>
            </div>
            <div class="completion-info">
              <span class="completion-label">完成度</span>
              <span class="completion-detail">{{ formCompletion.completed }}/{{ formCompletion.total }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Form Content -->
    <div class="form-container">
      <el-form
          label-width="auto"
          v-model="interviewNewStore.Settings"
          ref="ruleFormRef"
          :rules="rules"
          class="service-form"
          label-position="top"
      >
        <!-- Basic Services Section -->
        <div class="form-section">
          <div class="section-header">
            <h3 class="section-subtitle">
              <el-icon>
                <DocumentChecked/>
              </el-icon>
              基础服务
            </h3>
          </div>

          <el-row :gutter="24" v-if="interviewNewStore.Settings.generateReport">
            <el-col :span="12">
              <el-form-item label="报告名称" prop="reportName" class="form-item">
                <el-input
                    v-model="interviewNewStore.Settings.reportName"
                    placeholder="请输入面试报告名称"
                    class="custom-input"
                    clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- Voice Settings Section -->
        <div class="form-section">
          <div class="section-header">
            <h3 class="section-subtitle">
              <el-icon>
                <Microphone/>
              </el-icon>
              语音设置
            </h3>
          </div>

          <el-row :gutter="24">
            <el-col :span="12">
              <!-- Model Source Selection -->
              <el-form-item label="模型来源" class="form-item">
                <el-select
                    @change="setSelectModel"
                    v-model="modelSelectValue"
                    placeholder="请选择模型来源"
                    :disabled="loadingData"
                    class="custom-select"
                >
                  <el-option
                      v-for="(item, index) in models"
                      :key="index"
                      :value="item"
                      :label="item"
                      class="custom-option"
                  />
                </el-select>
              </el-form-item>

              <!-- Current Model Info -->
              <div v-if="currentModelInfo" class="model-info-card">
                <div class="model-info-header">
                  <el-icon class="model-icon" :style="{ color: currentModelInfo.color }">
                    <component :is="currentModelInfo.icon"/>
                  </el-icon>
                  <span class="model-name">{{ currentModelInfo.label }}</span>
                </div>
                <p class="model-description">{{ currentModelInfo.description }}</p>
              </div>

              <!-- Universal Voice Selection -->
              <div v-show="interviewNewStore.Settings.model_choice === 'universal'">
                <el-form-item label="声音来源" prop="universal_voice_name" class="form-item">
                  <el-select
                      v-model="universalSpeakerSelectValue"
                      placeholder="请选择音色"
                      @change="setUniversalSpeakerValue"
                      class="custom-select"
                  >
                    <el-option
                        v-for="(item, index) in universalSpeakers"
                        :key="index"
                        :value="index"
                        :label="item.LocalName"
                        class="voice-option"
                    />
                  </el-select>
                </el-form-item>
              </div>

              <!-- Character Voice Selection -->
              <div v-show="interviewNewStore.Settings.model_choice === 'hoyo'">
                <el-form-item label="选择角色" prop="hoyo_model_name" class="form-item">
                  <el-autocomplete
                      :fetch-suggestions="filterHoyoSpeaker"
                      v-model="hoyoModelSelectedValue"
                      placeholder="请输入角色名称"
                      @select="setHoyoSpeakerValue"
                      class="custom-autocomplete"
                      clearable
                  />
                </el-form-item>
              </div>

              <!-- Voice Speed Control -->
              <el-form-item label="朗读语速" class="form-item speed-item">
                <div class="speed-control">
                  <span class="speed-label">慢</span>
                  <el-slider
                      v-model="interviewNewStore.Settings.voice_speed"
                      :step="0.05"
                      :min="0.5"
                      :max="2.0"
                      class="speed-slider"
                      show-input
                      :show-input-controls="false"
                  />
                  <span class="speed-label">快</span>
                </div>
                <div class="speed-info">
                  <span class="current-speed">当前语速: {{ interviewNewStore.Settings.voice_speed }}x</span>
                </div>
              </el-form-item>

              <!-- Test Audio Button -->
              <div class="test-section">
                <el-button
                    type="primary"
                    @click="testAudio"
                    :disabled="AudioButtonDisable"
                    :loading="loadingAudio"
                    class="test-button"
                    size="large"
                >
                  <el-icon v-if="!loadingAudio">
                    <VideoPlay/>
                  </el-icon>
                  {{ AudioButtonMsg }}
                </el-button>
              </div>
            </el-col>

            <el-col :span="12">
              <!-- Tips Section -->
              <div class="tips-section">
                <div class="tips-header">
                  <el-icon class="tips-icon">
                    <Warning/>
                  </el-icon>
                  <h4 class="tips-title">使用提示</h4>
                </div>

                <div class="tips-content">
                  <div v-if="errorModel" class="tip-item error">
                    <el-icon>
                      <WarnTriangleFilled/>
                    </el-icon>
                    <span>出现错误，请刷新后重试！</span>
                  </div>

                  <div v-else-if="loadingData" class="tip-item loading">
                    <el-icon class="rotating">
                      <Loading/>
                    </el-icon>
                    <span>获取模型中...</span>
                  </div>

                  <div v-else-if="loadingAudio" class="tip-item loading">
                    <el-icon class="rotating">
                      <Loading/>
                    </el-icon>
                    <span>合成音频中，请耐心等待...</span>
                  </div>

                  <div v-else-if="interviewNewStore.Settings.model_choice === 'universal'" class="tip-item success">
                    <div class="tip-header">
                      <el-icon>
                        <CircleCheck/>
                      </el-icon>
                      <span class="tip-type">通用模型</span>
                    </div>
                    <div class="tip-details">
                      <div class="tip-pros">
                        <strong>优点：</strong>合成速度快，音色较常见
                      </div>
                      <div class="tip-cons">
                        <strong>缺点：</strong>音色丰富度较低，每次播放需要重新合成
                      </div>
                    </div>
                  </div>

                  <div v-else class="tip-item info">
                    <div class="tip-header">
                      <el-icon>
                        <CircleCheck/>
                      </el-icon>
                      <span class="tip-type">角色模型</span>
                    </div>
                    <div class="tip-details">
                      <div class="tip-pros">
                        <strong>优点：</strong>音色丰富，生成的语音会保存
                      </div>
                      <div class="tip-cons">
                        <strong>缺点：</strong>合成速度较慢
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

.service-settings-container {
  font-family: 'Noto Sans SC', sans-serif;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  &.fade-in {
    opacity: 1;
    transform: translateY(0);
  }
}

.settings-header {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f0f2f5;

  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    .header-left {
      flex: 1;

      .section-title {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 24px;
        font-weight: 700;
        color: #2c3e50;
        margin: 0 0 8px;

        .title-icon {
          font-size: 28px;
          color: #409eff;
        }
      }

      .section-description {
        font-size: 16px;
        color: #64748b;
        margin: 0;
        line-height: 1.5;
      }
    }

    .header-right {
      .completion-indicator {
        display: flex;
        align-items: center;
        gap: 15px;

        .completion-circle {
          position: relative;
          width: 60px;
          height: 60px;
          border-radius: 50%;
          background: conic-gradient(#409eff 0% var(--progress), #e5e7eb var(--progress) 100%);
          display: flex;
          align-items: center;
          justify-content: center;

          &::before {
            content: '';
            position: absolute;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: white;
          }

          .completion-text {
            position: relative;
            font-size: 12px;
            font-weight: 700;
            color: #409eff;
            z-index: 1;
          }
        }

        .completion-info {
          display: flex;
          flex-direction: column;
          gap: 2px;

          .completion-label {
            font-size: 14px;
            color: #64748b;
            font-weight: 500;
          }

          .completion-detail {
            font-size: 16px;
            color: #2c3e50;
            font-weight: 600;
          }
        }
      }
    }
  }
}

.form-container {
  .service-form {
    .form-section {
      background: #ffffff;
      border-radius: 12px;
      padding: 25px;
      margin-bottom: 25px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      border: 1px solid #e5e7eb;
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
        border-color: #d1d5db;
      }

      .section-header {
        margin-bottom: 20px;

        .section-subtitle {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 18px;
          font-weight: 600;
          color: #374151;
          margin: 0;

          .el-icon {
            font-size: 20px;
            color: #409eff;
          }
        }
      }

      .form-item {
        margin-bottom: 20px;

        :deep(.el-form-item__label) {
          font-weight: 600;
          color: #374151;
          font-size: 14px;
          margin-bottom: 8px;
        }

        .custom-input,
        .custom-select,
        .custom-autocomplete {
          width: 100%;

          :deep(.el-input__inner),
          :deep(.el-select__wrapper),
          :deep(.el-autocomplete .el-input__inner) {
            height: 44px;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s ease;

            &:focus {
              border-color: #409eff;
              box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
            }

            &:hover {
              border-color: #d1d5db;
            }
          }
        }

        &.speed-item {
          .speed-control {
            display: flex;
            align-items: center;
            gap: 15px;

            .speed-label {
              font-size: 12px;
              color: #6b7280;
              font-weight: 500;
              min-width: 20px;
              text-align: center;
            }

            .speed-slider {
              flex: 1;
              width: 300px;

              :deep(.el-slider__runway) {
                height: 6px;
                background-color: #e5e7eb;
              }

              :deep(.el-slider__bar) {
                background-color: #409eff;
              }

              :deep(.el-slider__button) {
                border: 2px solid #409eff;
                width: 16px;
                height: 16px;
              }
            }
          }

          .speed-info {
            text-align: center;

            .current-speed {
              font-size: 12px;
              color: #6b7280;
              background: #f3f4f6;
              padding: 4px 8px;
              border-radius: 4px;
            }
          }
        }
      }
    }
  }
}

.model-info-card {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;

  .model-info-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;

    .model-icon {
      font-size: 18px;
    }

    .model-name {
      font-weight: 600;
      font-size: 14px;
      color: #374151;
    }
  }

  .model-description {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
  }
}

.test-section {
  display: flex;
  justify-content: center;
  margin-top: 25px;

  .test-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 32px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;

    &:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
    }

    .el-icon {
      font-size: 16px;
    }
  }
}

.tips-section {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 12px;
  padding: 20px;
  height: 100%;
  min-height: 400px;

  .tips-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e2e8f0;

    .tips-icon {
      font-size: 20px;
      color: #f59e0b;
    }

    .tips-title {
      font-size: 16px;
      font-weight: 600;
      color: #374151;
      margin: 0;
    }
  }

  .tips-content {
    .tip-item {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 16px;
      border-radius: 8px;
      font-size: 14px;
      line-height: 1.6;

      &.error {
        background: rgba(239, 68, 68, 0.1);
        border: 1px solid rgba(239, 68, 68, 0.3);
        color: #dc2626;

        .el-icon {
          color: #dc2626;
        }
      }

      &.loading {
        background: rgba(245, 158, 11, 0.1);
        border: 1px solid rgba(245, 158, 11, 0.3);
        color: #d97706;

        .el-icon {
          color: #d97706;

          &.rotating {
            animation: spin 1s linear infinite;
          }
        }
      }

      &.success {
        background: rgba(34, 197, 94, 0.1);
        border: 1px solid rgba(34, 197, 94, 0.3);
        color: #16a34a;
      }

      &.info {
        background: rgba(59, 130, 246, 0.1);
        border: 1px solid rgba(59, 130, 246, 0.3);
        color: #2563eb;
      }

      .tip-header {
        display: flex;
        align-items: center;
        gap: 8px;

        .el-icon {
          font-size: 16px;
        }

        .tip-type {
          font-weight: 600;
          font-size: 15px;
        }
      }

      .tip-details {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding-left: 24px;

        .tip-pros,
        .tip-cons {
          font-size: 13px;
          line-height: 1.5;

          strong {
            font-weight: 600;
          }
        }
      }
    }
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

// Responsive Design
@media (max-width: 1024px) {
  .settings-header {
    .header-content {
      flex-direction: column;
      gap: 20px;

      .header-right {
        align-self: flex-start;
      }
    }
  }

  .form-container {
    .service-form {
      .form-section {
        padding: 20px;

        .el-row {
          .el-col {
            &:first-child {
              margin-bottom: 20px;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .settings-header {
    .header-content {
      .header-left {
        .section-title {
          font-size: 20px;

          .title-icon {
            font-size: 24px;
          }
        }

        .section-description {
          font-size: 14px;
        }
      }

      .header-right {
        .completion-indicator {
          .completion-circle {
            width: 50px;
            height: 50px;

            &::before {
              width: 36px;
              height: 36px;
            }

            .completion-text {
              font-size: 10px;
            }
          }
        }
      }
    }
  }

  .form-container {
    .service-form {
      .form-section {
        padding: 15px;
        margin-bottom: 20px;

        .section-header {
          .section-subtitle {
            font-size: 16px;
          }
        }

        .form-item {
          .custom-input,
          .custom-select,
          .custom-autocomplete {
            :deep(.el-input__inner),
            :deep(.el-select__wrapper),
            :deep(.el-autocomplete .el-input__inner) {
              height: 40px;
            }
          }

          &.speed-item {
            .speed-control {
              gap: 10px;

              .speed-label {
                font-size: 11px;
                min-width: 15px;
              }
            }
          }
        }
      }
    }
  }

  .tips-section {
    min-height: 300px;
    padding: 15px;

    .tips-header {
      .tips-title {
        font-size: 14px;
      }
    }

    .tips-content {
      .tip-item {
        padding: 12px;
        font-size: 13px;

        .tip-details {
          .tip-pros,
          .tip-cons {
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>